<template>
  <header class="f-header">
    <img src="@/assets/imgs/logo.png" class="f-logo" alt="" />
    <span class="sys-name">系统名称</span>
    <div class="header-out">
      <div style="height: 50px; line-height: 50px;display:flex;flex-direction:row;align-items:center">
        <img src="@/assets/imgs/user.png" style="height:30px;width:30px;margin-left:10px;border-radius:25px;margin-right:10px"/>
        {{username}} <img class="imgOut" @click="quitSys" src="@/assets/imgs/icons/quit.png" style="height:20px;width:20px;margin-left:10px"/>
      </div>
    </div>
  </header>
</template>

<script>
export default{
    data(){
        return{
          username:"",
            timer :null,
            timeNow :new Date()
        }
    },
    methods:{
        quitSys(){
            this._storage.LStorage.clean()
            this.$router.replace({
                path:'/login'
            })
        }
    },
    mounted(){
      this.username = this._storage.LStorage.get("userName")
    }
}

</script>

<style lang="scss">
.f-header {
  position: relative;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: #2b303c;

  .f-logo {
    position: absolute;
    top: 6px;
    left: 26px;
    width: 128px;
    height: 38px;
  }
  .sys-name {
    font-size: 22px;
    font-weight: 500;
    color: #ffffff;
  }
  .header-out {
    position: absolute;
    top: 2px;
    line-height: 16px;
    right: 26px;
    color: #fff;
  }
  .imgOut{
    cursor: pointer;
  }
}
</style>